@use 'sass:list';
@use 'sass:color';
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

:root {
	--primary: #3a86ff;
	--secondary: #6c757d;
	--success: #28a745;
	--danger: #ff4d4f;
	--warning: #fe5700;
	--themeGreen: rgb(1, 185, 188)
}

$btnColor: #3a86ff, #6c757d, #28a745, #ff4d4f, #fe5700;

@for $i from 1 through list.length($btnColor) {
    .btn.type-#{$i} {
        $color: list.nth($btnColor, $i);
        background: $color;

        &:hover {
            background: color.adjust($color, $lightness: +10%);
        }

        &:active {
            background: color.adjust($color, $lightness: -10%);
        }
    }
}